<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .header,
        .footer {
            width: 1200px;
            height: 120px;
            margin: 0 auto;
            background-color: orange;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 50px;
            color: #fff;
        }

        .footer {
            height: 300px;
        }

        ul,
        li {
            list-style: none;
        }

        ul {
            width: 1200px;
            display: flex;
            flex-wrap: wrap;
            margin: 0 auto;
            justify-content: space-between;
            padding-top: 10px;
        }

        li {
            width: 290px;
            border: 1px solid #333;
            margin-bottom: 10;
            padding: 5px;
            box-sizing: border-box;
        }

        li>a>img {
            width: 278px;
            display: block;
        }

        .pagination {
            width: 1200px;
            height: 50px;
            display: flex;
            align-items: center;
            margin: 10px auto;
        }

        .pagination>.prev,
        .pagination>.next {
            width: 50px;
            height: 30px;
            cursor: pointer;
            background-color: skyblue;
            font-size: 24px;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;

        }

        .pagination>.total {
            font-size: 30px;
            margin: 0 20px;
            font-weight: 700;
        }

        .pagination>select {
            font-size: 22px;
            margin-left: 30px;
            padding-left: 20px;
        }

        .pagination>.disable {
            cursor: not-allowed;
            background-color: #ccc;
        }
    </style>
</head>

<body>
    <div class="header">头部导航</div>
    <div class="pagination">
        <span class="prev">&lt;</span>
        <span class="total">1 / 100</span>
        <span class="next">&gt;</span>
        <select>
            <option value="4">4</option>
            <option value="8">8</option>
            <option value="12">12</option>
            <option value="16">16</option>

        </select>
    </div>
    <ul>
        <li></li>
    </ul>

    <div class="footer">网页底部</div>
    <script src="./taobao.js"></script>
    <script>
        /* 
            分析:

                分页: 
                    从总数据中截取当前页的数据 渲染到页面上 
                    下一页要覆盖上一页的内容 
                    而且要联动
        
                1.打开页面 
                    1.从数据中截取第一页的数据 并渲染到页面上 (slice)
                    2.调整当前页  和 总页数信息  

                       <span class="total">当前页 / 总页数</span>
                       // 总页数 = 总数据条数/ 每页显示的条数
                    3. 调整上一页的按钮  
                        判断当前页码是否是第一页 如果是第一页 
                        <span class="prev disable">&lt;</span>
                        如果不是第一页 
                         <span class="prev">&lt;</span>
                    4. 调整下一页的按钮 
                         判断当前页码是否是最后一页 如果是最后一页 
                        <span class="next disable">&lt;</span>
                        如果不是第一页 
                         <span class="next">&lt;</span>
                    5. 调整下拉框
                        规定了 每页显示多少条  就让这个数字被选中  
                2.用户点击上一页  
                    1. 当前页码 -- 
                    2. 从总数据中该页码对应的数据并且渲染到页面上
                    3.调整当前页  和 总页数信息  

                       <span class="total">当前页 / 总页数</span>
                       // 总页数 = 总数据条数/ 每页显示的条数
                    4. 调整上一页的按钮  
                        判断当前页码是否是第一页 如果是第一页 
                        <span class="prev disable">&lt;</span>
                        如果不是第一页 
                         <span class="prev">&lt;</span>
                    5. 调整下一页的按钮 
                         判断当前页码是否是最后一页 如果是最后一页 
                        <span class="next disable">&lt;</span>
                        如果不是第一页 
                         <span class="next">&lt;</span>
                    6. 调整下拉框
                        规定了 每页显示多少条  就让这个数字被选中 
        
                     规定了 每页显示多少条  就让这个数字被选中  
                3.用户点击下一页  
                    1. 当前页码 ++
                    2. 从总数据中截取该页码对应的数据并且渲染到页面上
                    3. 调整当前页 和 总页数信息  

                       <span class="total">当前页 / 总页数</span>
                       // 总页数 = 总数据条数/ 每页显示的条数
                    4. 调整上一页的按钮  
                        判断当前页码是否是第一页 如果是第一页 
                        <span class="prev disable">&lt;</span>
                        如果不是第一页 
                         <span class="prev">&lt;</span>
                    5. 调整下一页的按钮 
                         判断当前页码是否是最后一页 如果是最后一页 
                        <span class="next disable">&lt;</span>
                        如果不是第一页 
                         <span class="next">&lt;</span>
                    6. 调整下拉框
                        规定了 每页显示多少条  就让这个数字被选中 
                4. 调整下拉框  
                    1. 修改一页显示多少条 
                    2. 从总数据中截取该页码对应的数据并且渲染到页面上
                    3. 调整当前页 和 总页数信息  

                       <span class="total">当前页 / 总页数</span>
                       // 总页数 = 总数据条数/ 每页显示的条数
                    4. 调整上一页的按钮  
                        判断当前页码是否是第一页 如果是第一页 
                        <span class="prev disable">&lt;</span>
                        如果不是第一页 
                         <span class="prev">&lt;</span>
                    5. 调整下一页的按钮 
                         判断当前页码是否是最后一页 如果是最后一页 
                        <span class="next disable">&lt;</span>
                        如果不是第一页 
                         <span class="next">&lt;</span>
        


                        上面好多重复的动作 

                        1. 渲染数据 
                        2. 调整当前页 总页数 
                        3. 判断是否第一页
                        4. 判断是否最后一页
                        5. 下拉框每页条数给选中  

                        这个五个动作是重复的  可以封装一个函数 


                        封装函数以后 


                        用户点击上一页 

                        用户点击下一个

                        用户点击下拉框

                        它们分别绑定事件  做一些事情  
        
        */

        // 一页多少条   
        // 第几页已知

        // 1   4    0  4
        // 2   4    4  8


        // slice((当前页-1)*每页条数,当前页*每页条数)

        var current = 2;
        var pagesize = 8;
        var total = 0;
        var totalEle = document.getElementsByClassName('total')[0];
        var prevBtn = document.querySelector('.prev');
        var nextBtn = document.querySelector('.next');
        var selectEle = document.querySelector('select');
        function bindHTML() {
            // 渲染页面 
            // 截取当前页 
            var currentData = alldata.slice((current - 1) * pagesize, current * pagesize)
            // 渲染
            document.querySelector('ul').innerHTML = currentData.reduce(function (prev, item) {
                return prev + `  <li>
                <a href="${item.detail_url}"><img src="${item.pic_url}" alt=""></a>
                <p>${item.title}</p>
                <p>店铺:${item.seller_nick}</p>
                <p>销量:${item.sales}</p>
                <p>价格:${item.price}</p>
                <p>时间:${item.data_update}</p>
            </li>`
            }, '')

            // 求总页数 
            total = Math.ceil(alldata.length / pagesize)

            // 修改 当前页  总页数 
            totalEle.innerText = `${current} / ${total}`
            // 判断是否是第一页 
            prevBtn.className = current === 1 ? 'prev disable' : 'prev'


            // 判断是否是最后一页  
            nextBtn.className = current === total ? 'next disable' : 'next';


            // 下拉框要选中 一页多少条这个选项
            selectEle.value = pagesize

        }

        bindHTML();



        prevBtn.onclick = function () {
            if(current === 1) return;
            current--;
            bindHTML();
        }


        nextBtn.onclick = function () {
            if(current === total) return;
            current++;
            bindHTML();
        }


        selectEle.onchange = function(){
            pagesize = selectEle.value - 0;

            current = 1;
            bindHTML();
        }


    </script>
</body>

</html>